import React, { Component, createRef } from 'react'
// 非受控组件, 多表单情况下不能，一般多于用较少的表单项，而且多为input:text类型
//  + 非受控制组件通过 ref对象来进行获取数据
// react中如何来定义ref，类组件中通过 React.createRef()方法来完成定义
// 往往用ref绑定在html标签中，用来获取dom，然后给一些图表所用

class App extends Component {
  usernameRef = createRef()

  getUserInputValue = () => {
    console.log(this.usernameRef.current.value)
    console.log(this.userDom.value)
  }

  render() {
    return (
      <div>
        <div>
          {/* ref属性绑定在html元素上，则返回dom对象 */}
          <input type="text" ref={this.usernameRef} />
          <br />
          {/* 回调函数 -- 了解一下就可以 */}
          <input type="text" ref={(dom) => (this.userDom = dom)} />
        </div>
        <div>
          <button onClick={this.getUserInputValue}>获取用户名</button>
        </div>
      </div>
    )
  }
}

export default App
